<template>
    <div class="box">
        <div class="top"></div>

        <div class="left">
            <div class="ltop">
                <div class="title">
                    <Title title="近三年来毕业人员去向 - - - -"></Title>
                </div>

                <div class="qux">
                    <div>
                        <p style="padding: 3px;">北京</p>
                        <div style="width: 100%; height: 50px;display: flex;justify-content: space-around;">

                            <div
                                style=" display: flex;flex-direction: column;justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */">
                                <p>6000人</p>
                                <img src="../assets/image/qux 01.png" />
                                <p>2022</p>
                            </div>
                            <div
                                style=" display: flex;flex-direction: column;justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */">
                                <p>8980人</p>
                                <img src="../assets/image/qux02.png" />
                                <p>2021</p>
                            </div>
                            <div
                                style=" display: flex;flex-direction: column;justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */">
                                <p>2345人</p>
                                <img src="../assets/image/qux 03.png" />
                                <p>2020</p>
                            </div>
                        </div>
                    </div>

                    <echartVue :option="option" />

                </div>
            </div>

            <div class="lbot">
                <div class="title">
                    <Title title="毕业生工作状态 - - - -"></Title>
                </div>
                <echartVue :option="option1" />
            </div>
        </div>

        <div class="center">
            <div style="width: 100%;height: 40vh;margin-top: 80px;">
                <mapVue></mapVue>
            </div>
            <!-- <tableVue></tableVue> -->
             <ertu></ertu>
            
            <footernav class="footernav"></footernav>
        </div>

        <div class="right">
            <div class="rtop">

                <div style="width: 100%;height: 30px;">
                    <Title title="毕业生流向城市 - - - -" class="rtitle">
                        <template v-slot="prop">
                            <div class="trotateTitle">{{ prop.title }}</div>
                        </template>
                    </Title>
                </div>
                  <div style="width: 100%;height: 90%;">
                     <xinzi></xinzi>
                  </div>
                <!-- <echartVue :option="option2"></echartVue> -->

               

            </div>
            <div class="rbot">

                <div style="width: 100%;height: 30px;">
                    <Title title="毕业生薪资分布 - - - -" class="rbtitle">
                        <template v-slot="prop">
                            <div class="brotateTitle">{{ prop.title }}</div>
                        </template>
                    </Title>
                </div>

                <echartVue :option="option3"></echartVue>
            </div>
        </div>

    </div>
</template>

<script setup lang='ts'>
import footernav from '../components/footernav.vue';
import Title from '../components/Title/index.vue'
import { ref } from 'vue'
import echartVue from '../components/echart.vue';
import mapVue from '../components/map.vue'
import tableVue from '../components/table.vue';
import xinzi from '../components/xinzi.vue';
import ertu from '../components/ertu.vue';

let option = ref({
    grid: {
        left: "4%",
        right: "10%",
        top: "10%",
        bottom: "10%",
        containLabel: true,
    },
    xAxis: {
        type: "value",
        boundaryGap: [0, 0.01],
        splitLine: { show: false },
        axisLabel: {
            textStyle: {
                color: "#fff",
            },
        }, // 取消 x 轴网格线
    },
    yAxis: {
        type: "category",
        data: ["湖北", "江苏", "浙江", "广西", "广东", "重庆", "天津", "上海"],
        axisLabel: {
            textStyle: {
                color: "#FFF", // 修改 x 轴标题颜色为红色
            },
        },
    },
    series: [
        {
            name: "合作社",
            type: "bar",
            // data: [],
            data: [1000, 2255, 3373, 4482, 3556, 5635, 3342, 4361],

            itemStyle: {
                color: "#d8345f",
                borderRadius: 10,
            },
        },
        {
            name: "社员人数",
            type: "bar",
            // data: [],
            data: [2246, 3372, 4456, 2281, 3327, 4435, 5549, 2102],

            itemStyle: {
                color: "#05c3df",
                borderRadius: 10,
            },
        },
        {
            name: "单股金",
            type: "bar",
            // data: [],
            data: [1155, 3385, 4476, 3349, 3246, 4282, 2152, 4456],

            itemStyle: {
                color: "#fcd247",
                borderRadius: 10,
            },
        },
    ],
})

let option1 = ref({

    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        left: 'center',
        top: 'bottom',
        data: [
            'rose1',
            'rose2',
            'rose3',
            'rose4',
            'rose5',
        ]
    },
    series: [
        {
            name: 'Radius Mode',
            type: 'pie',
            radius: [50, 90],
            center: ['50%', '50%'],
            roseType: 'radius',
            itemStyle: {
                borderRadius: 0
            },
            emphasis: {
                label: {
                    show: true
                }
            },
            data: [
                { value: 60, name: '已就业46.64' },
                { value: 33, name: '未就业27.05' },
                { value: 18, name: '返回未就业8.77' },
                { value: 10, name: '以往未就业0.77' },
                { value: 10, name: '返校重听0.77' },

            ]
        }
    ]
})


let option3 = ref( {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c}%'
  },
  legend: {
    textStyle: {
      color: '#fff'
    },
    data: ['30K', '20K~30K', '15K~20K', '10K~15K', '10K及以下']
  },
  series: [
    {
      name: 'Expected',
      type: 'funnel',
      left: '10%',
      width: '80%',
      label: {
        // formatter: '{b}Expected'
      },
      labelLine: {
        show: false
      },
      emphasis: {
        label: {
          position: 'inside',
          formatter: '{b}Expected: {c}%'
        }
      },
      data: [
        { value: 4, name: '10K及以下' },
        { value: 28, name: '10K~15K' },
        { value: 3, name: '15K~20K' },
        { value: 3, name: '20K~30K' },
        { value: 2, name: '30K' }
      ]
    },
    // {
    //   name: 'Actual',
    //   type: 'funnel',
    //   left: '10%',
    //   width: '80%',
    //   maxSize: '80%',
    //   label: {
    //     position: 'inside',
    //     formatter: '{c}%',
    //     color: '#fff'
    //   },
    //   itemStyle: {
    //     opacity: 0.5,
    //     borderColor: '#fff',
    //     borderWidth: 2
    //   },
    //   emphasis: {
    //     label: {
    //       position: 'inside',
    //       formatter: '{b}Actual: {c}%'
    //     }
    //   },
    //   data: [
    //     { value: 30, name: 'Visit' },
    //     { value: 10, name: 'Inquiry' },
    //     { value: 5, name: 'Order' },
    //     { value: 50, name: 'Click' },
    //     { value: 80, name: 'Show' }
    //   ],
    //   // Ensure outer shape will not be over inner shape when hover.
    //   z: 100
    // }
  ]
})



let ranking1 =
    "";
let ranking2 =
   "";
let ranking3 =
   "";
let ranking4 =
   "";
let dataZoomMove = {
   start: 0,
   end: 5
};
let xdata = ["城市排名1","城市排名2","城市排名3","城市排名4","城市排名5","城市排名6","城市排名7","城市排名8"];
let sdata = [100,99,90,80,60,50,40,30];
let sdata1 = [{ symbolPosition: "end", value: 100 },{ symbolPosition: "end", value: 99 },{ symbolPosition: "end", value: 90 },{ symbolPosition: "end", value: 80 },{ symbolPosition: "end", value: 60 },{ symbolPosition: "end", value: 50 },{ symbolPosition: "end", value: 40 },{ symbolPosition: "end", value: 30 }];
let option2 = ref({
   backgroundColor: "#040F25",
   //你的代码
    tooltip: {
        show: false,
        trigger: "axis"
      },
      dataZoom: [
        {
          show: sdata.length > 6 ? true : false, // 为true 滚动条出现
          realtime: true,
          type: "slider", // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
          height: "90%", // 表示滚动条的高度，也就是粗细
          startValue: dataZoomMove.start, // 表示默认展示20%～80%这一段。
          endValue: dataZoomMove.end,
          width: 6,
          right: "20",
          top: "0%", //位置和grid配置注意下
          yAxisIndex: [0, 1], //关联多个y轴
          moveHandleStyle: {
            color: "rgba(89, 202, 241,.5)"
          },
          moveHandleSize: "6",
          emphasis: {
            moveHandleStyle: {
              color: "rgba(89, 202, 241,.5)"
            }
          },
          textStyle: {
            color: "rgba(255,255,255,0)"
          },
          backgroundColor: "rgba(255,255,255,.1)",
          borderColor: "rgba(255,255,255,0)",
          fillerColor: "rgba(0,0,0,0)",
          handleSize: "6",
          handleStyle: {
            color: "rgba(255,255,255,0)"
          },
          brushStyle: {
            color: "rgba(129, 243, 253)"
          }
        },
        {
          //没有下面这块的话，只能拖动滚动条，鼠标滚轮在区域内不能控制外部滚动条
          type: "inside",
          yAxisIndex: 0,
          zoomOnMouseWheel: false, //滚轮是否触发缩放
          moveOnMouseMove: true, //鼠标滚轮触发滚动
          moveOnMouseWheel: true
        }
      ],
      grid: {
        containLabel: true,
        bottom: "5%",
        left: "5%",
        top: "5%",
        right: "5%"
      },
      xAxis: {
        type: "value",
        axisLabel: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        }
      },
      yAxis: [
        {
          type: "category",
          data: xdata,
          inverse: true,
          axisLabel: {
            fontSize: "18px",
            inside: false,
            verticalAlign: "center",
            
            padding: [5, 0, 0, 0],
            margin: 20, //刻度标签与轴线之间的距离
            formatter: function (value, index) {
              // console.log("formatterformatter", value, index);
              if (index < 3) {
                return `{img${index}|${
                  xdata.indexOf(value) + 1
                }} {a|${value}}`;
              } else {
                return `{img3|${xdata.indexOf(value) + 1}} {a|${value}}`;
              }
            },
            rich: {
              a: {
                fontSize: "14px",
                color: "#fff",
                padding: [0, 0, 0, 15],
                width: 50
              },
              b: {
                fontSize: "18px",
                color: "#8891B0",
                padding: [4, 15, 0, 15]
              },
              img0: {
                width: 26,
                height: 22,
                color: "#FF2E05",
                fontSize: "18px",
                
                align: "center",
                fontWeight: 400,
                padding: [3, 5, 0, 0],
                verticalAlign: "middle",
                backgroundColor: {
                  image: ranking1
                }
              },
              img1: {
                width: 26,
                height: 22,
                color: "#FE6E07",
                fontSize: "18px",
                align: "center",
                fontWeight: 400,
                padding: [3, 5, 0, 0],
                verticalAlign: "middle",
                backgroundColor: {
                  image: ranking2
                }
              },
              img2: {
                width: 26,
                height: 22,
                color: "#FFD648",
                fontSize: "18px",
                align: "center",
                fontWeight: 400,
                padding: [3, 5, 0, 0],
                verticalAlign: "middle",
                backgroundColor: {
                  image: ranking3
                }
              },
              img3: {
                width: 26,
                height: 22,
                color: "#06CDF7",
                fontSize: "18px",
                align: "center",
                fontWeight: 400,
                padding: [3, 5, 0, 0],
                verticalAlign: "middle",
                backgroundColor: {
                  image: ranking4
                }
              }
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#13387a"
            }
          }
        },

        {
          type: "category",
          data: xdata,
          inverse: true,
          padding: [0, 0, 0, 0],
          axisLabel: {
            inside: false,
            verticalAlign: "center",
            padding: [0, 0, 0, 0],
            margin: 20, //刻度标签与轴线之间的距离
            formatter: function (value, index) {
              return `{a|${sdata[xdata.indexOf(value)]}}`;
            },
            rich: {
              a: {
                fontSize: 18,
                fontFamily: "Barlow Condensed SemiBold",
                color: "#00DEFF",
                padding: [4, 0, 0, 0]
              }
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#13387a"
            }
          }
        }
      ],
      series: [
        {
          data: sdata,
          type: "bar",
          barWidth: 26,
          borderRadius: 30,
          showBackground: true,
          verticalAlign: "center",

          backgroundStyle: {
            color: "rgba(47, 110, 182, 0.26)",
            borderRadius: 30
          },
          zlevel: 10,
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: "rgba(44, 205, 223,1)" // 0% 处的颜色
              },
              // {
              //   offset: 0.2,
              //   color: "rgba(1,249,266,0.3)" // 0% 处的颜色
              // },
              {
                offset: 1,
                color: "rgba(0, 151, 237, 1)" // 100% 处的颜色
              }
            ]
          },
       
          itemStyle: {
            verticalAlign: "center",
            zlevel: 10,
            borderRadius: 40,

            borderWidth: 0,
            decal: {
              color: "rgba(255,255,255,0.3)",
              symbol: "rect",
              symbolSize: 1,
              dashArrayY: [1, 0],
              dashArrayX: 7,
              rotation: 60
            },

            emphasis: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(255, 68, 0, 1)" // 0% 处的颜色
                  },
                  // {
                  //   offset: 0.2,
                  //   color: "rgba(1,249,266,0.3)" // 0% 处的颜色
                  // },
                  {
                    offset: 1,
                    color: "rgba(223, 45, 44, 1)" // 100% 处的颜色
                  }
                ]
              }
            }
          }
        },
        {
          // name: "主系列",
          type: "bar",
          data: sdata,
          barGap: "-100%",
          zlevel: 10,
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: "rgba(44, 205, 223, 0.3)" // 0% 处的颜色
              },
              // {
              //   offset: 0.2,
              //   color: "rgba(1,249,266,0.3)" // 0% 处的颜色
              // },
              {
                offset: 1,
                color: "rgba(0, 151, 237, 0.3)" // 100% 处的颜色
              }
            ]
          },
          itemStyle: {
            borderRadius: 30,
            borderWidth: 0,
            emphasis: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(255, 68, 0, 0.2)" // 0% 处的颜色
                  },
                  // {
                  //   offset: 0.2,
                  //   color: "rgba(1,249,266,0.3)" // 0% 处的颜色
                  // },
                  {
                    offset: 1,
                    color: "rgba(223, 45, 44, 0.3)" // 100% 处的颜色
                  }
                ]
              }
            }
          },
          barWidth: 26
        },
        {
          type: "pictorialBar",
          // symbol: "react",
          symbolSize: [3, 28],
          symbolOffset: [3, 0],
          zlevel: 12,
          itemStyle: {
            color: "#fff",
            borderRadius: 3,
            shadowColor: "#006BFF",
            shadowBlur: 10
          },
          data: sdata1
        }
      ]
});

</script>

<style lang="scss" scoped>
.box {
    width: 100vw;
    height: 100vh;
    position: relative;
    display: flex;
    background: url("../assets/images/pageBg.png") no-repeat 0 0/100% 100%;
    color: #fff;

    .top {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 80px;
        background: url('../assets/images/Top.png') no-repeat 0 0 / 100% 100%;
    }

    .left {
        width: 30%;
        height: 100%;
        background: url('../assets/images/Left.png') no-repeat 0 0 /100% 100%;

        .ltop {
            margin: 70px 60px 30px 50px;
            height: 49vh;
            border: 1px solid red;

            .title {
                height: 40px;
                width: 100%;
                // background: url("../assets/images/topleft.png") no-repeat 0 0/100% 100%;
                color: white;
                font-weight: bold;
                line-height: 40px;
                // padding-left: 10px;
            }

            .qux {
                width: 95%;
                height: 85%;
                margin: auto;
                margin-top: 10px;
                background-color: #0C1D5F;
            }
        }

        .lbot {
            margin: 10px 60px 30px 50px;
            height: 35vh;
            border: 1px solid red;

            .title {
                height: 40px;
                width: 100%;
                // background: url("../assets/images/topleft.png") no-repeat 0 0/100% 100%;
                color: white;
                font-weight: bold;
                line-height: 40px;
                // padding-left: 10px;
            }
        }
    }

    .center {
        flex: 1;

        .footernav {
            width: 50%;
            height: 75px;
            position: absolute;
            bottom: 5vh;
            left: 25%;

        }
    }

    .right {
        width: 30%;
        height: 100%;
        background: url('../assets/images/Right.png') no-repeat 0 0 /100% 100%;

        .rtop {
            margin: 80px 60px 30px 50px;
            height: 40vh;
            border: 1px solid red;

            .rtitle {
                transform: rotateY(180deg);

                .trotateTitle {
                    transform: rotateY(-180deg);
                    padding-left: 20px;
                    padding-top: 10px;
                    font-size: 19px;
                    font-weight: bold;
                }
            }

        }

        .rbot {
            margin: 10px 60px 30px 50px;
            height: 42vh;
            border: 1px solid red;

            .rbtitle {
                transform: rotateY(180deg);

                .brotateTitle {
                    transform: rotateY(-180deg);
                    padding-left: 20px;
                    padding-top: 10px;
                    font-size: 19px;
                    font-weight: bold;
                }
            }
        }
    }
}
</style>